<template>
 <div class="customerfilter_container">
  <Row>
      <Col span="24">
        <div class="nav">
            <h3 class="addcustomergroup_title">新建客户分组</h3>
        </div>
      </Col>
  </Row>

  <Row>
      <Col span="24" style="background-color:#fff;">
       <div class="search_box">
         <Label>人群名称:</Label>
         <Input type="text" placeholder="请输入人群名称" style="width:300px;"></Input>
         <Button type="primary" icon="ios-search" @click="ruleValidate">搜索</Button>
        </div>
      </Col>
  </Row>

    <div class="condition_box">
    <Row>
      <Col span="10">
         <div class="condition_box_left">
            <div class="condition_box_left_header">
                 <span class="condition_box_left_header_number">1</span>
                 <span class="">选择条件</span>
            </div>
            <div class="condition_box_left_box">
                <div class="basic_attr_box">
                    <h4 class="integral_info_title">基础属性</h4>
                    <div class="tag_box">
                        <Button class="tag" v-for="(tag,index) in basicAttr" :key="index"  @click="showmarks(tag)" :class="{'active':tag.show === true}">{{tag.basic}}<span class="mark"  v-show="tag.show">&#10004;</span></Button>
                    </div>
                </div>
                <div class="rfm_attr_box">
                    <h4 class="integral_info_title">RFM属性</h4>
                    <div class="tag_box">
                      <Button class="tag" v-for="(tag,index) in rfmAttr" :key="index"   @click="showmarks(tag)" :class="{'active':tag.show === true}">{{tag.basic}}<span class="mark" v-show="tag.show">&#10004;</span></Button>
                    </div>
                </div>
                <div class="order_attr_box">
                    <h4 class="integral_info_title">订单属性</h4>
                    <div class="tag_box">
                      <Button class="tag" v-for="(tag,index) in orderAttr" :key="index"   @click="showmarks(tag)" :class="{'active':tag.show === true}">{{tag.basic}}<span class="mark" v-show="tag.show">&#10004;</span></Button>
                    </div>
                </div>
                <div class="group_attr_box">
                    <h4 class="integral_info_title">已有人群</h4>
                    <div class="tag_box">
                      <Button class="tag" v-for="(tag,index) in groupAttr" :key="index"   @click="showmarks(tag)" :class="{'active':tag.show === true}">{{tag.basic}}<span class="mark" v-show="tag.show">&#10004;</span></Button>
                    </div>
                </div>
                <div class="member_attr_box">
                    <h4 class="integral_info_title">会员属性</h4>
                    <div class="tag_box">
                      <Button class="tag" v-for="(tag,index) in memberAttr" :key="index"  @click="showmarks(tag)" :class="{'active': true}">{{tag.basic}}<span class="mark" v-show="tag.show">&#10004;</span></Button>
                    </div>
                </div>
                <div class="social_attr_box">
                    <h4 class="integral_info_title">社交属性</h4>
                    <div class="tag_box">
                      <Button class="tag" v-for="(tag,index) in socialAttr" :key="index"  @click="showmarks(tag)" :class="{'active':tag.show === true}">{{tag.basic}}<span class="mark" v-show="tag.show">&#10004;</span></Button>
                    </div>
                </div>
                <div class="user_defined_box">
                    <h4 class="integral_info_title">自定义标签</h4>
                    <div class="tag_box">
                      <Button class="tag" v-for="(tag,index) in userdefinedAttr" :key="index" @click="showmarks(tag)" :class="{'active':tag.show === true}">{{tag.basic}}<span class="mark" v-show="tag.show">&#10004;</span></Button>
                    </div>
                </div>
            </div>
         </div>
      </Col>
      <Col span="14">
         <div class="condition_box_right">
            <div class="condition_box_right_header">
                 <span class="condition_box_right_header_number">2</span>
                 <span class="">设置已筛选得条件</span>
            </div>
            <div class="condition_box_right_box">
              <Form ref="formDynamic" :model="formDynamic" :label-width="80" style="width: 300px">
                  <FormItem
                          v-for="(item, index) in formDynamic.items"
                          v-if="item.status"
                          :key="index"
                          :label="'Item ' + item.index"
                          :prop="'items.' + index + '.value'"
                          :rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}">
                      <Row>
                          <Col span="18">
                              <Input type="text" v-model="item.value" placeholder="Enter something..."></Input>
                          </Col>
                          <Col span="4" offset="1">
                              <Button @click="handleRemove(index)">Delete</Button>
                          </Col>
                      </Row>
                  </FormItem>
              </Form>
            </div>
         </div>
      </Col>
    </Row>
    <Row style="margin-top:2vh;">
      <Col span="10" push="14">
          <Button type="primary">保存静态分组</Button>
          <Button type="primary">保存动态分组</Button>     
      </Col>
    </Row>
  </div>
 </div>
</template>
<script>
 export default {
    name:'CustomerFilter',
    data () {
        return {
          groupname:'',
          num:null,
          markArr:[],
          //  additionArray:['手机号','性别','年龄','姓名','总购买次数','首次付款时间','累计付款金额','最后付款时间','订单筛选','已有客户分组','营销沉淀人群','上传人群','入会时间','会员等级','积分','是否是会员','关注时间','是否取关','xxx店铺绑卡'],
          basicAttr:[
            {basic:'手机号', show:false},
            {basic:'性别',show:false},
            {basic:'年龄',show:false},
            {basic:'姓名',show:false}
          ],
          rfmAttr:[
            {basic:'总购买次数', show:false},
            {basic:'首次付款时间',show:false},
            {basic:'累计付款金额',show:false},
            {basic:'最后付款时间',show:false},
            {basic:'首次付款时间',show:false},
          ],
          orderAttr:[
            {basic:'订单筛选', show:false}
          ],
          groupAttr:[
            {basic:'已有客户分组', show:false},
            {basic:'营销沉淀人群',show:false},
            {basic:'上传人群',show:false},
          ],
          memberAttr:[
            {basic:'入会时间',show:false},
            {basic:'会员等级',show:false},
            {basic:'积分',show:false},
            {basic:'是否是会员',show:false},
          ],
          socialAttr:[
            {basic:'关注时间',show:false},
            {basic:'是否取关',show:false},
          ],
          userdefinedAttr:[
            {basic:'xxx店铺绑卡',show:false},
          ],
          // 右侧拖拽区域
          index: 1,
          formDynamic: {
              items: [
                  {
                      value: '',
                      index: 1,
                      status: 1
                  }
              ]
          }

        }
    },
    methods:{
        ruleValidate(){
          if(this.groupname==""){
            this.$Notice.warning({      
              title: " 提示信息",
              desc: "搜索内容不能为空!"
            });
          }else{

          }
        },
        spliceArray(){
            this.basicAttr = this.additionArray.slice(0,4);
            this.rfmAttr = this.additionArray.slice(4,8);
            this.orderAttr = this.additionArray.slice(8,9);
            this.groupAttr = this.additionArray.slice(9,12);
            this.memberAttr = this.additionArray.slice(12,16);
            this.socialAttr = this.additionArray.slice(16,18);
            this.userdefinedAttr = this.additionArray.slice(18,19);
        },  
        showmarks(tag){
            tag.show =!tag.show;
        },
        handleAdd () {
          this.index++;
          this.formDynamic.items.push({
              value: '',
              index: this.index,
              status: 1
          });
        },
        handleRemove (index) {
            this.formDynamic.items[index].status = 0;
        }
    },
    mounted () {
      // this.spliceArray();  
    }
 }
</script>
<style lang="scss" scoped>
@import "../../styles/common.scss";
.customerfilter_container{
    .active{
      border: 1px solid #8fc3ff;
      color: #8fc3ff;
      background-color: #ecf6ff;
   }
   @include container_global;
   .nav {
    height: 5vh;
    padding-left: 2vw;
    line-height: 35px;
    background-color: #fff;
    .addcustomergroup_title {
      font-family: Times;
      font-weight: bolder;
    }
  }
 .search_box {
    margin: 2vh 0px 2vh 2vw;
  }

    .condition_box {
    width: 100%;
    height: 100%;
    background-color: #fff;
    .condition_box_left {   //左侧条件拖拽区域
      width: 100%;
      min-height: 80vh;
      padding-left: 2vw;
      background-color: #fff;
      .condition_box_left_header {
        width: 100%;
        height: 5vh;
        .condition_box_left_header_number {
          display: inline-block;
          width: 30px;
          height: 30px;
          line-height: 30px;
          color: #fff;
          background-color: lightskyblue;
          text-align: center;
        }
      }
      .condition_box_left_box { 
        width: 100%;
        margin-top: 1vh;
        min-height: 80vh;
        border: 1px solid #ccc;
        .basic_attr_box{
          @include condition_box_global;
          .integral_info_title {
             @include title_global;
           }
          .tag_box{
              width: 100%;
              .tag{
                 margin: 5px;
                 position: relative;
                .mark{
                  @include mark_global;
                }
              }
             
          }
        }
        .rfm_attr_box{
            @include condition_box_global;
          .integral_info_title {
             @include title_global;
           }
          .tag_box{
              width: 100%;
              .tag{
                 margin: 5px;
                 .mark{
                  @include mark_global;
                }
              }
          }
        }
        .order_attr_box{
           @include condition_box_global;
          .integral_info_title {
             @include title_global;
           }
          .tag_box{
              width: 100%;
              .tag{
                 margin: 5px;
                 .mark{
                  @include mark_global;
                }
              }
          }
        }
        .group_attr_box{
           @include condition_box_global;
          .integral_info_title {
             @include title_global;
           }
          .tag_box{
              width: 100%;
              .tag{
                 margin: 5px;
                 .mark{
                  @include mark_global;
                }
              }
          }
        }
        .member_attr_box{
          @include condition_box_global;
          .integral_info_title {
             @include title_global;
           }
          .tag_box{
              width: 100%;
              .tag{
                 margin: 5px;
                 .mark{
                  @include mark_global;
                }
              }
          }
        }
        .social_attr_box{
          @include condition_box_global;
          .integral_info_title {
             @include title_global;
           }
          .tag_box{
              width: 100%;
              .tag{
                 margin: 5px;
                 .mark{
                  @include mark_global;
                }
              }
          }
        }
        .user_defined_box {
          @include condition_box_global;
          .integral_info_title {
             @include title_global;
           }
          .tag_box{
              width: 100%;
              .tag{
                 margin: 5px;
                 .mark{
                  @include mark_global;
                }
              }
          }
        }
      }
    }
    .condition_box_right{   //拖拽放置区域
        width: 100%;
        min-height: 80vh;
        padding-left: 2vw;
        background-color: #fff;
       .condition_box_right_header{
         width: 100%;
         height: 5vh;
         .condition_box_right_header_number {
          display: inline-block;
          width: 30px;
          height: 30px;
          line-height: 30px;
          color: #fff;
          background-color: lightskyblue;
          text-align: center;
        }
       }
       .condition_box_right_box{  
          width: 100%;
          margin-top: 1vh;
          min-height: 73vh;
          border: 1px solid #ccc;
      }
    }
  }
}
</style>
